<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1、引入依赖 -->
  <!-- crossorigin  将远程js脚本错误在本地显示出来 -->
  <!-- <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> -->
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>

  <!-- 
    react开发依赖（必须依赖的三个库）：
      1、react 包含react所必须的核心代码
      2、react-dom  react渲染在不同平台所需要的核心代码
      3、babel 将jsx转换成React代码的工具
   -->
   
   <!-- 开始开发 -->
   <!-- 注意：使用jsx，并且希望script中的jsx代码被解析，必须在script标签中添加一个属性 type="text/babel"-->
    
   <script type="text/babel">

    // 封装App类组件  继承react组件
    class App extends React.Component {
      // 定义属性
      constructor() {
        // 继承父类属性
        super() //初始化父类实例
        // this.message = 'hello world' // jsx中依赖的数据，
        // 要想在数据改变时界面相应改变，需要定义在this.state中
        this.state = {
          message: 'hello world'
        }
      }
      // 组件渲染的内容
      render() {
        // 小括号内的为一个整体
        // return (
          //   <div>
            //     <h1>{this.message}</h1>
            //     <button onClick={this.changeText.bind(this)}>改变文本</button>
            //   </div>
            // )
        const { message } = this.state
        return (
          <div>
            <h1>{message}</h1>
            <button onClick={this.changeText.bind(this)}>改变文本</button>
            <button onClick={() => this.changeText()}>改变文本</button>
            <button onClick={this.changeText1}>改变文本</button>
          </div>
        )
      }

      changeText(){
        // this.message = 'hello react'
        //此时message改变了，但界面文字并未改变，因为需要重新渲染dom
        //  this.render() //永远不要手动调用render函数，react框架调用的，手动调用没有任何效果，
        this.setState({
          message: 'hello react'
        })
      }

      changeText1 = () => {
        this.setState({message: 'hello'})
      }
    }

    // react16
    // ReactDOM.render(<App/>, document.getElementById('app'))

    // react18
    ReactDOM.createRoot(document.querySelector('#app')).render(<App />)
   </script>
</body>
</html>